/*!
 * Component: components/index/index
 * License: MIT
 * Created: 2019-09-26 14:43
 */
@import '../../var.scss';
.knowledge-item {
  width: 330rpx;
  height: 345rpx;
  background-color: $bgcolor-light;
  &-image {
    width: 330rpx;
    height: 165rpx;
    border-radius: 10rpx;
  }
  .characters {
    & > text {
      margin-bottom: 10rpx;
      &:first-child {
        margin-top: 10rpx;
      }
    }
    &-title {
      width: 100%;
      height: 32rpx;
      color: $title-color;
      font-weight: 700;
      font-size: 28rpx;
      line-height: 32rpx;
    }
    &-subtitle {
      height: 32rpx;
      color: $info-color;
      font-weight: 400;
      font-size: 22rpx;
      line-height: 32rpx;
    }
    &-status {
      width: 100%;
      padding: 18rpx 0;
      font-size: 22rpx;
      color: $info-color;
      font-weight: 400;
      border: 1px solid $border-color;
      opacity: 1;
      background: #fff;
      border-radius: 8px;
      text-align: center;
      margin-top: 2rpx;
    }
    &-read {
      display: block;
      color: $info-color;
      font-weight: 400;
      font-size: 22rpx;
      line-height: 22rpx;
      height: 22rpx;
      margin-top: 20rpx;
    }
    &-count {
      display: block;
      color: $info-color;
      font-weight: 400;
      font-size: 22rpx;
      line-height: 22rpx;
      height: 22rpx;
    }
    &-price {
      font-weight: 700;
      font-size: 22rpx;
      .price {
        color: $price-color;
      }
      .free {
        color: $title-color;
      }
      .currency {
        color: $price-color;
      }
    }
  }
}
.showdot {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
  &.clamp-1 {
    -webkit-line-clamp: 1;
  }
  &.clamp-2 {
    -webkit-line-clamp: 2;
  }
  &.clamp-3 {
    -webkit-line-clamp: 3;
  }
}
